import {globalData} from "../globalData/globalData.js";
import {elements} from "../globalData/elements.js";
import {themeColor} from "../common/themeColor.js";
import {imageCollection} from "../globalData/imageCollection.js";

/**
 * 清空画布
 */


export const canvasUtil = {
    clearCanvas: () => {
        // globalData.ctx.fillStyle=themeColor.bgColor
        // globalData.ctx.fillRect(0,0,globalData.screenWidth, globalData.screenHeight)
        canvasUtil.drawImg(0, 0, globalData.screenWidth, globalData.screenHeight, imageCollection['chessboard'])
    },

    drawRectElement: (id, name, x, y, w, h, color) => {
        let element = {
            id, name, x, y, w, h
        }
        elements.set(id, element)
        canvasUtil.drawRect(x, y, w, h, color)
        return element
    },
    drawButton: (id, text, x, y, w, h, bgColor,textColor, font) => {
        let element = {
            id, name: text, x, y, w, h
        }
        elements.set(id, element)
        canvasUtil.drawRectElement(id, text, x, y, w, h, bgColor)
        let size = canvasUtil.getTextSize(text,font)
        let textHeight = size.actualBoundingBoxAscent+ size.actualBoundingBoxDescent
        canvasUtil.drawText(text, x+(w-size.width)/2, y +(h- (h-textHeight)/2), textColor, font)
        return element
    },
    drawRect: (x, y, w, h, color) => {
        if (color) {
            globalData.ctx.fillStyle = color
        }
        globalData.ctx.fillRect(x, y, w, h)
    },
    drawStrokeRectElement: (id, name, x, y, w, h, fillColor, strokeColor) => {
        let element = {
            id, name, x, y, w, h
        }
        elements.set(id, element)
        canvasUtil.drawStrokeRect(x, y, w, h, fillColor, strokeColor)
        return element
    },
    drawStrokeRect: (x, y, w, h, fillColor, strokeColor) => {
        if (fillColor) {
            globalData.ctx.fillStyle = fillColor
        }
        if (strokeColor) {
            globalData.ctx.strokeStyle = strokeColor
        }
        globalData.ctx.fillRect(x, y, w, h)
        globalData.ctx.strokeRect(x, y, w, h)
    },
    drawTextElement: (id, text, x, y, color, font) => {
        let element = {
            id, name: text, x, y
        }
        elements.set(id, element)
        canvasUtil.drawText(text, x, y, color, font)
        return element
    },
    drawText: (text, x, y, color, font) => {

        globalData.ctx.font = '14px Arial'
        if (color) {
            globalData.ctx.fillStyle = color
        }
        if (font) {
            globalData.ctx.font = font
        }
        globalData.ctx.fillText(text, x, y)

    },
    getTextSize: (text, font) => {
        globalData.ctx.font = font
        return globalData.ctx.measureText(text)
    },
    drawImgElement: (id, text, x, y, w, h, img) => {
        let element = {
            id, name: text, x, y, w, h
        }
        elements.set(id, element)

        canvasUtil.drawImg(x, y, w, h, img)
        return element
    },
    drawImg: (x, y, w, h, img) => {
        globalData.ctx.drawImage(img, x, y, w, h)
    },
    drawLine: (x1, y1, x2, y2, width, strokeColor) => {
        if (strokeColor) {
            globalData.ctx.strokeStyle = strokeColor
        }
        if (width) {
            globalData.ctx.lineWidth = width
        }
        globalData.ctx.beginPath()
        globalData.ctx.moveTo(x1, y1)
        globalData.ctx.lineTo(x2, y2)
        globalData.ctx.stroke()

    },
    drawBaseArea: (id, name, x, y, w, h) => {
        canvasUtil.drawRectElement(id, name, x, y, w, h, themeColor.transparent)
    },
    //画迷雾
    drawMaskArea: (id, name, x, y, w, h) => {
        canvasUtil.drawRectElement(id, name, x, y, w, h, themeColor.transparent3)
    },
    drawUnexploreArea: (id, name, x, y, w, h) => {
        canvasUtil.drawRectElement(id, name, x, y, w, h, themeColor.black)
    },
    drawGoldArea: (id, name, x, y, w, h) => {
        canvasUtil.drawRectElement(id, name, x, y, w, h, themeColor.gold)
    },
    drawCanMoveArea: (x, y, r) => {
        canvasUtil.drawCircle(x, y, r, themeColor.color2)
    },
    drawCircle: (x, y, r, color) => {
        if (color) {
            globalData.ctx.fillStyle = color
        }
        globalData.ctx.beginPath()
        globalData.ctx.arc(x, y, r, 0, 2 * Math.PI)
        globalData.ctx.fill()
    },
    drawCanBuildArea: (x, y, w, h) => {
        canvasUtil.drawRect(x, y, w, h, themeColor.green1)
    },
}
